<template>
  <div>
    <!-- <headerNavigation :jump="1"></headerNavigation> -->
    <labelNavigation :Xuexidata="semesterName"></labelNavigation>
    <button class="return" @click="back()">
    <i class="el-icon-arrow-left"></i>
    返回
    </button>
    <div class="photoCountainer">
      <div class="background">
        <img src="@/assets/imagesbackground/AwaitWord.png" />
        <span class="send1">{{teachList["班主任寄语"]}}</span>
        <span class="send2">{{teachList["任课老师寄语"]}}</span>
      </div>
      <!-- 弹框 -->
      <div class="mask" v-if="showModal" @click="showModal = false"></div>
      <div class="pop" v-if="showModal">
        <div class="headertitle">
          <span class="confirm" @click="showModal = false">取消</span>
          <span class="teacher">邀请任课老师</span>
          <span class="confirm" @click="yesinvite">确定</span>
        </div>
        <div class="content">
          <span 
          :class="{show:inviteIndex==index}" 
          v-for="(item,index) in teachername" @click="invite(item,index)">{{ item.name}}</span>
        </div>
      </div>
      <div class="btnCountainer">
        <button class="btn" @click="showModal = true">邀请任课老师</button>
      </div>
    </div>
    <footerNavigation></footerNavigation>
  </div>
</template>
<script>
// import headerNavigation from "../components/background/headerNavigation";
import labelNavigation from "../components/background/labelNavigation";
// import footerNavigation from "../components/background/footerNavigation";
import { inviteteacherAPI, inviteAPI,studentbsogsoAPI } from "@/api/make/make";

export default {
  components: {
    // headerNavigation,
    labelNavigation,
    // footerNavigation,
  },
  data() {
    return {
      showModal: false,
      studentId: "",
      teachername:[],
      inviteIndex:'',
      userId:'',
      semesterName:"",
      teachList:[]
    };
  },
  mounted(){
     window.onbeforeunload = function (e) { 
    var storage = window.localStorage; 
    storage.clear() 
    }
  },
  async created() {
    //学期
    let semesterName=this.$route.query.semesterName
    if(semesterName!=undefined){
    sessionStorage.setItem("semesterName",this.$route.query.semesterName)
    this.semesterName=sessionStorage.getItem("semesterName")
    }
    else{
    this.semesterName=sessionStorage.getItem("semesterName")
    }

   //学生id
    let studentId = this.$route.params.stuId;
    let growthId = this.$route.params.growthId;
    if (studentId != undefined) {
      sessionStorage.setItem("studentId", this.$route.params.stuId);
      this.studentId = sessionStorage.getItem("studentId");
    } else {
      this.studentId = sessionStorage.getItem("studentId");
    }
    if (growthId != undefined) {
      sessionStorage.setItem("growthId", this.$route.params.growthId);
      this.growthId = sessionStorage.getItem("growthId");
    } else {
      this.growthId = sessionStorage.getItem("growthId");
    }
    this.teachFn()
    const res = await inviteteacherAPI({ studentId: this.studentId });
      console.log("8888888",res.data)
      this.teachername = res.data
    },
  methods: {
    invite(item,index){
      this.inviteIndex = index
     if (this.inviteIndex == index) {
      this.userId=item.userId
      }
    },
    async yesinvite(){
        const res2= await inviteAPI ({studentId:this.studentId,userId:this.userId})
        if(res2===200){
           this.$message.success("邀请成功")
           this.$router.push("/doGrowth/friendsword");
        }else{
           this.$message.error("已邀请过老师")
        }
      },
      async teachFn(){
        const res = await studentbsogsoAPI({studentId: this.studentId,growthId: this.growthId});
        this.teachList=res.data['2']
        console.log(this.teachList)
      },
      back() {
          this.$router.go(-1)
      },
    },
};
</script>

<style scoped>
.background {
  position: relative;
  margin-top: 3.125rem;
}
.background img {
  height: 34rem;
  width: 24rem;
  display: flex;
  margin: 0 auto;
}
.btnCountainer {
  display: flex;
  margin-top: 3.125rem;
  justify-content: center;
}
.btn {
  background-color: rgba(124, 0, 0, 1);
  color: aliceblue;
  border: .0625rem solid rgba(187, 187, 187, 1);
  border-radius: 1.875rem;
  width: 17.5rem !important;
  height: 2.5rem !important;
  font-size: .9375rem;
}
.btnCountainer2 {
  width: 46.875rem;
  display: flex;
  justify-content: space-between;
}
/* 弹框 */
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.pop {
  background-color: #fff;
  position: fixed;
  top: 6.25rem;
  left: 18.75rem;
  width: 23.5625rem;
  height: 35.4375rem;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: .625rem;
}
/* 弹框内容 */
.headertitle {
  display: flex;
  justify-content: space-between;
  padding: .5rem;
  height: 3.125rem;
  margin-top: .375rem;
  border-bottom: .0625rem solid rgba(245, 245, 245, 1);
}
.confirm {
  font-size: .625rem;
  color: rgba(129, 28, 29, 1);
}
.teacher {
  font-size: 1.25rem;
}
.content span {
  display: inline;
  width: 100%;
  height: 3.125rem;
  text-align: center;
  font-size: 1.25rem;
}
.content {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.return {
  font-size: 1.125rem;
  text-align: center;
  position: relative;
  left: 27.5rem;
  border: 0rem;
  background: #fff;
}
.show {
  color: #7C0000;
}
.send1{
  position: absolute;
  white-space: pre-wrap;
  width: 12.5rem  !important;
  height: 11.25rem;
  top: 20%;
  left: 45%;
}
.send2{
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 12.5rem;
  height: 11.25rem;
  top: 60%;
  left: 45%;
}
</style>